let that;
class Tab {
    constructor(id) {
        that = this;
        console.log(that);
        this.main = document.querySelector(id);
        // this.lis = this.main.querySelectorAll('li');
        // this.sections = this.main.querySelectorAll('section');
        this.add = this.main.querySelector('.tabadd');
        this.ul = this.main.querySelector('ul:nth-child(1)');
        that.tabscons = this.main.querySelector('.tabscon');

        this.init();
    }
    // 事件
    init() {
        this.updata();
        for (let i = 0; i < this.lis.length; i++) {
            this.lis[i].n = i;
            this.lis[i].onclick = this.toggleTab;
            that.remove[i].onclick = this.removeTab;
            this.span[i].ondblclick = this.editTab;
            this.sections[i].ondblclick = this.editTab;
        }
        this.add.onclick = this.addTab;
    }
    // 获取最新元素
    updata() {
        this.lis = this.main.querySelectorAll('li');//li
        this.sections = this.main.querySelectorAll('section');//内容
        that.remove = this.main.querySelectorAll('.icon-guanbi');//删除
        this.span = this.main.querySelectorAll('.fisrstnav li span:nth-child(1)');//修改文本
        // this.item = this.main.querySelectorAll('.section');//修改文本
    }
    // 排他
    clearClass() {
        for (let i = 0; i < that.lis.length; i++) {
            this.lis[i].className = '';
            this.sections[i].className = '';
        }
    };
    // 切换
    toggleTab() {
        that.clearClass();
        this.className = 'liactive';
        that.sections[this.n].className = 'conactive'
    };

    // 添加
    addTab() {
        that.clearClass();
        // 生成标签
        if (that.lis.length < 7) {
            const newLi = `<li class="liactive"><span>新标签${that.lis.length + 1}</span><span class="iconfont icon-guanbi"></span></li>`;
            that.ul.insertAdjacentHTML('beforeend', newLi);
            // 生成内容
            const section = ` <section class="conactive">测试${Math.random()}</section>`
            that.tabscons.insertAdjacentHTML('beforeend', section);
            that.init();
        } else {
            alert('不能再多了')
            that.lis[6].click()
            return
        }

    }
    // 删除
    removeTab(e) {
        e.stopPropagation();
        let index = this.parentNode.n;
        // alert(index);
        // 删除标签和内容
        that.lis[index].remove();
        that.sections[index].remove();
        that.init();
        if (document.querySelector('.liactive')) return;
        // 删除前一个选中状态
        index > 0 && index--;
        // 手动调用点击事件,没有元素则不执行
        that.lis[index] && that.lis[index].click()
    };
    // 修改
    editTab() {
        // alert(11)
        let str = this.innerHTML;
        this.innerHTML = `<input type="text">`;
        const input = this.children[0];
        input.value = str;
        input.select();
        input.onblur = function () {
            // 失去焦点 将值赋予文本
            input.parentNode.innerHTML = input.value;
        }
        input.onkeyup = function (e) {
            if (e.keyCode == 13) this.blur();
        }
    };

};
const tad = new Tab('#tab');

